<template>
  <el-dialog
    v-model="mechanismStore.JgPersonnelInfoAddShow"
    :before-close="close"
    title="新增人员信息"
    width="30%"
  >
    <el-form :model="personnelInfo" label-width="100px">
      <el-form-item label="姓名">
        <el-input v-model.trim="personnelInfo.xm" placeholder="请输入姓名" style="width: 90%" />
        <!-- <el-autocomplete
          v-model="personnelInfo.xm"
          :fetch-suggestions="querySearch"
          :debounce="1000"
          popper-class="my-autocomplete"
          placeholder="请输入姓名"
          style="width: 90%"
          @select="handleSelect"
        >
          <template #default="{ item }">
            <div class="ryInfo">
              <span>{{ item.xm }}</span>
              <span>{{ item.sjszjgMc }}</span>
              <span>{{ item.ydLxdh }}</span>
            </div>
          </template>
        </el-autocomplete> -->
      </el-form-item>
      <el-form-item label="职务">
        <el-select v-model="personnelInfo.xzzwdm" placeholder="请选择职务" style="width: 90%">
          <el-option
            v-for="item in (mechanismStore.zwOptions as any)"
            :key="item.id"
            :label="item.mc"
            :value="item.dm"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="岗位">
        <el-select v-model="personnelInfo.xfgwflydm" placeholder="请选择岗位" style="width: 90%">
          <el-option
            v-for="item in (mechanismStore.gwOptions as any)"
            :key="item.id"
            :label="item.mc"
            :value="item.dm"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="手机长号">
        <el-input
          v-model.trim="personnelInfo.ydLxdh"
          placeholder="请输入手机长号"
          style="width: 90%"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button class="cancel" @click="close">取消</el-button>
        <el-button type="primary" class="confirm" @click="saveJgPersonnelInfo">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useMechanismStore, useLoginInfoStore } from '@/store'
import { addJyry } from '@/service'

const mechanismStore = useMechanismStore()
const loginInfoStore = useLoginInfoStore()

const personnelInfo = ref({
  xm: '',
  xzzwdm: '',
  xfgwflydm: '',
  ydLxdh: '',
  cjrId: loginInfoStore.loginInfo.jgId,
  sjly: 1,
  sjszjgTywysbm: loginInfoStore.loginInfo.jgId,
})

// interface ryInfo {
//   xm: string
//   sjszjgMc: string
//   ydLxdh: string
//   xfjyryTywysbm: string
// }

// const ryInfoList = ref<ryInfo[]>([])
// const createFilter = (queryString: any) => {
//   return (restaurant: any) => {
//     return restaurant.value.toLowerCase().indexOf(queryString.xm.toLowerCase()) === 0
//   }
// }

// const querySearch = (queryString: any, cb: any) => {
//   // 修改姓名 说明它是新增的数据
//   // personnelInfo.value.xfjyryTywysbm = ''
//   // personnelInfo.value.sjly = 1

//   if (!queryString) {
//     return cb([])
//   }

//   queryAllJyry({ ssc: personnelInfo.value.xm })
//     .then((res: any) => {
//       ryInfoList.value = res

//       const results = queryString.xm
//         ? ryInfoList.value.filter(createFilter(queryString.xm))
//         : ryInfoList.value
//       // call callback function to return suggestion objects
//       cb(results)
//     })
//     .catch(() => {
//       cb([])
//     })
// }

// const handleSelect = (item: ryInfo) => {
//   personnelInfo.value.xfjyryTywysbm = item.xfjyryTywysbm
//   personnelInfo.value.xm = item.xm
//   personnelInfo.value.ydLxdh = item.ydLxdh
//   personnelInfo.value.sjly = 0
// }

/** 关闭弹窗 */
const close = () => {
  personnelInfo.value = {
    xm: '',
    xzzwdm: '',
    xfgwflydm: '',
    ydLxdh: '',
    cjrId: loginInfoStore.loginInfo.jgId,
    sjly: 1,
    sjszjgTywysbm: loginInfoStore.loginInfo.jgId,
  }
  mechanismStore.JgPersonnelInfoAddShow = false
}

/** 保存机构人员信息 */
const saveJgPersonnelInfo = () => {
  //电话校验正则表达式
  const regExp = /^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/
  if (!personnelInfo.value.xm) {
    return ElMessage.warning('请输入姓名')
  } else if (!personnelInfo.value.xzzwdm) {
    return ElMessage.warning('请选择职务')
  } else if (!personnelInfo.value.xfgwflydm) {
    return ElMessage.warning('请选择岗位')
  } else if (!personnelInfo.value.ydLxdh) {
    return ElMessage.warning('请输入手机长号')
  } else if (!regExp.test(personnelInfo.value.ydLxdh)) {
    return ElMessage.warning('手机长号格式不正确')
  }
  addJyry(personnelInfo.value)
    .then((res) => {
      ElMessage.success('保存成功')
      mechanismStore.PersonnelTableRefresh = true
      close()
    })
    .catch((err) => {
      if (err.message) {
        ElMessage.error(err.message)
      } else {
        ElMessage.error('保存失败')
      }
    })
}
</script>

<style lang="scss" scoped>
.cancel:hover {
  color: #209dbe;
}
.cancel {
  width: 90px;
}
.confirm {
  width: 90px;
  border-color: #209dbe;
  background-color: #209dbe;
}

.ryInfo {
  display: flex;
  justify-content: space-between;
  span {
    margin-left: 10px;
  }
}
::v-deep .el-form-item__label {
  font-weight: 700;
}
::v-deep .el-form-item__label::before {
  content: '*';
  width: 12px;
  margin-top: -2px;
  color: #f56c6c;
}
</style>
